<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>模拟可搜索的下拉框</title>
<link rel="stylesheet" tyole="text/css" href="../style/reset.css">
<style type="text/css">
.wrapper{
	position: relative;
	width: 200px;
	margin: 0 auto;
}
.mySelect{
	width: 100%;
	height: 30px;
	line-height: 30px;
}
.myOption{
	position: absolute;
	display: none;
	width: 100%;
	max-height: 150px;
	border: 1px solid #ccc;
	border-top: 0;
  	padding: 1px;
	overflow-y: auto;
}
.myOption a {
	display: block;
	height: 30px;
	line-height: 30px;
}
.myOption a:hover{
	background-color: #1E90FF;
}
</style>
</head>
<body>
	<div class="wrapper">
		<input type="text" name="" id="mySelect" class="mySelect">
		<div id="myOption" class="myOption"></div>
	</div>
	<div class="wrapper" style="margin-top: 300px">
		<input type="text" name="" id="mySelect2" class="mySelect">
		<div id="myOption2" class="myOption"></div>
	</div>
<script type="text/javascript" src="../script/my.js"></script>
<script type="text/javascript">
window.onload = function(){
	var data = [];
	for(var i = 1; i < 100; i++){//模拟数据
		data.push(i+"");
	}
	var mySelect = new SearchSelect({
		select: "mySelect",
		option: "myOption",
		data: data
	});
	mySelect.init();
	var mySelect2 = new SearchSelect({
		select: "mySelect2",
		option: "myOption2",
		data: ['sahhkds','ei3oew','2kdo4fl','我是爱的','圣诞快乐']
	});
}
var SearchSelect = function(opt){
	this.select = document.getElementById(opt.select);
	this.option = document.getElementById(opt.option);
	this.data = opt.data;
	this.cls = opt.cls || "myOption";
}
SearchSelect.prototype = {
	constructor: SearchSelect,
	init: function(){
		this.listenClick();
		this.listenKeyUp();
		return this;
	},
	listenClick: function(){
		var that = this;
		this.select.onclick = function(ev){
			var e = ev || event;
			var aOption = getByClass(that.cls);
			for (var i = 0, len = aOption.length; i < len; i++) {/*所有SearchSelect隐藏*/
				getStyle(aOption[i], "display") == "block" && (aOption[i].style.display = "none");
			}
			that.updateOption();
			stopBubble(e);
		}

		this.option.onclick = function(ev){
			var e = ev || event;
			if(e.target.href){
				that.select.value = e.target.innerHTML;
				that.option.style.display = "none";
			}
			stopBubble(e);
		}
		document.addEventListener('click', function(){
			getStyle(that.option, "display") == "block" && (that.option.style.display = "none");
		}, false);
	},
	listenKeyUp: function(){
		var that = this;
		this.select.onkeyup = function(){
			that.updateOption();
		}
	},
	updateOption: function(){
		this.option.innerHTML = "";
		var val = this.select.value.replace(/(^\s*)|(\s*$)/g, "");
		var frag = document.createDocumentFragment();
		for(var i = 0, len = this.data.length; i < len; i++){
			if(!val || this.data[i].toLowerCase().indexOf(val.toLowerCase()) != -1){
				var a = document.createElement('a');
				a.href = "#";
				a.innerHTML = this.data[i];
				frag.appendChild(a);
			}
		}
		this.option.appendChild(frag);
		getStyle(this.option, "display") == "none" && (this.option.style.display = "block");
		this.option.innerHTML || (this.option.style.display = "none");
	}
};
</script>
</body>
</html>